<script lang="ts" setup>
    import {darkTheme, NButton, NConfigProvider, NH2, NLayout, NLayoutContent, NLayoutHeader, NSpace} from 'naive-ui';
    import {logDebug, logError, logInfo, logTrace, logWarn} from "./core/Log.js";

    const appTitle: string = "日志打印测试页面";

    function messageTemplate(): string {
        return `现在的时间是: ${new Date().toTimeString()}, 你获得的随机整数为: ${Math.round(Math.random() * 1e6)}, 你获得的随机浮点数为: ${Math.random().toFixed(8)}`;
    }

</script>

<template>
    <NConfigProvider :theme="darkTheme">
        <NLayout position="absolute">
            <NLayoutHeader bordered position="absolute" style="height: 64px;padding: 1em;">
                <NH2>{{ appTitle }}</NH2>
            </NLayoutHeader>
            <NLayoutContent style="position: absolute; top: 64px; bottom: 64px; padding: 1em;">
                <NSpace>
                    <NButton type="tertiary" @click="logTrace(messageTemplate())">打印追踪消息</NButton>
                    <NButton type="default" @click="logDebug(messageTemplate())">打印调试消息</NButton>
                    <NButton type="info" @click="logInfo(messageTemplate())">打印通知消息</NButton>
                    <NButton type="warning" @click="logWarn(messageTemplate())">打印警告消息</NButton>
                    <NButton type="error" @click="logError(messageTemplate())">打印错误消息</NButton>
                </NSpace>
            </NLayoutContent>
        </NLayout>
    </NConfigProvider>
</template>

<style scoped>

</style>
